<template>
  <div>
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="姓名" style="width: 180px">
        <el-input v-model="form.LeaveName" />
      </el-form-item>
      <el-form-item label="开始时间" style="width: 250px">
        <el-date-picker
          v-model="form.StartTime"
          aria-label="请选择开始时间"
          type="datetime"
          placeholder="请选择开始时间"
          format="YYYY年MM月DD日 HH时"
          style="width: 100%"
        />
      </el-form-item>
      <el-form-item label="结束时间" style="width: 250px">
        <el-date-picker
          v-model="form.EndTime"
          aria-label="请选择结束时间"
          type="datetime"
          placeholder="请选择开始时间"
          format="YYYY年MM月DD日 HH时"
          style="width: 100%"
        />
      </el-form-item>
      <el-form-item label="状态">
        <el-select
          v-model="form.StatusId"
          placeholder="请选择状态"
          style="width: 150px"
        >
          <el-option label="待审批" :value="1" />
          <el-option label="审批中" :value="2" />
          <el-option label="已审批" :value="3" />
          <el-option label="已拒绝" :value="4" />
          <el-option label="终审_已通过" :value="5" />
          <el-option label="终审_已拒绝" :value="6" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getLeave()"> 查询 </el-button>
      </el-form-item>
    </el-form>
  </div>
  <div>
    <!-- 列表 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column type="index" label="编号" width="60" />
      <el-table-column prop="leaveName" label="姓名" width="90" />
      <el-table-column
        v-slot="scoped"
        prop="departmentId"
        label="部门"
        width="100"
      >
        <span v-if="scoped.row.departmentId == 1">IT信息部</span>
        <span v-if="scoped.row.departmentId == 2">财务部</span>
        <span v-if="scoped.row.departmentId == 3">行政部</span>
        <span v-if="scoped.row.departmentId == 4">人力资源部</span>
      </el-table-column>
      <el-table-column prop="leaveType" label="请假类型" width="100" />
      <el-table-column prop="startTime" label="请假时间" width="100" />
      <el-table-column prop="leaveHours" label="总工时" width="70" />
      <el-table-column
        v-slot="scoped"
        prop="reportTime"
        label="报到时间"
        width="100"
      >
        {{ scoped.row.reportTime.substring(0, 10) }}
      </el-table-column>
      <el-table-column prop="leaveReason" label="请假事由" width="100" />
      <el-table-column prop="leaderName" label="部门领导" width="100" />
      <el-table-column prop="statusName" label="审批状态" width="90" />
      <el-table-column
        v-slot="scoped"
        prop="createTime"
        label="创建时间"
        width="120"
      >
        {{ scoped.row.createTime.substring(0, 10) }}
      </el-table-column>
      <el-table-column v-slot="scoped" prop="" label="操作">
        <el-item
          v-show="
            scoped.row.statusName == '待审批' &&
            store.user.userId == scoped.row.leaveId
          "
        >
          <el-button
            link
            type="primary"
            size="small"
            @click="upd(scoped.row.laId)"
          >
            修改
          </el-button>
          <el-button
            link
            type="primary"
            size="small"
            @click="del(scoped.row.laId)"
            >删除</el-button
          >
        </el-item>
        <el-item
          v-show="
            store.user.powerId == 1 ||
            (store.user.powerId == 2 &&
              store.user.userId != scoped.row.leaveId &&
              scoped.row.statusName == '已审批')
          "
        >
          <el-button
            link
            type="primary"
            size="small"
            @click="app(scoped.row.laId)"
            >审批</el-button
          >
        </el-item>
        <el-item
          v-show="
            store.user.powerId == 2 &&
            store.user.userId != scoped.row.leaveId &&
            scoped.row.statusName == '待审批'
          "
        >
          <el-button
            link
            type="primary"
            size="small"
            @click="app(scoped.row.laId)"
            >审批</el-button
          >
        </el-item>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      v-model:current-page="form.PageIndex"
      v-model:page-size="form.PageSize"
      :page-sizes="[1, 2, 3, 15]"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="form.TotalCount"
      @size-change="getLeave()"
      @current-change="getLeave()"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import axios from "axios";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();

import { useCounterStore } from "@/stores/counter";
import { KongaUrl } from "@/axios/axiosHelp";
const store = useCounterStore();
const form = reactive({
  UserId: store.user.userId,
  DepartmentId: store.user.departmentId,
  LeaveName: "",
  StartTime: "",
  EndTime: "",
  StatusId: null,
  PageIndex: 1,
  PageSize: 15,
  TotalCount: 0,
});

// --菜单列表显示
const tableData: any = ref([]);
const getLeave = () => {
  KongaUrl({
    url: "/user/api/LevaApp/GetLeave",
    method: "get",
    params: form,
  }).then((res) => {
    console.log(res);
    if (res.data.code == 600) {
      tableData.value = res.data.items;
      form.TotalCount = res.data.totalCount;
    }
  });
};

//删除
const del = (id: any) => {
  ElMessageBox.confirm("是否删除?", "警告", {
    confirmButtonText: "是",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    KongaUrl({
      url: "/userwriter/api/Leva/DelLeave",
      method: "post",
      params: {
        LAId: id,
      },
    }).then((res) => {
      if (res.data.code == 100) {
        ElMessage.success(res.data.message);
      } else {
        ElMessage.error(res.data.message);
        return;
      }
    });
  });
};
//审批页面跳转
const app = (id: any) => {
  router.push({
    path: "/Approval",
    query: {
      id: id,
    },
  });
};
const upd = (id: any) => {
  router.push({
    path: "/UpdateLeave",
    query: {
      id: id,
    },
  });
};

const tableDatas: any = ref([]);
const userId: any = ref();

onMounted(() => {
  getLeave();
});
</script>

<style scoped>
</style>